<template>
  <div id="app">
    <HeaderCom
      v-show="toRaw(router).currentRoute.value.fullPath !== '/index'"
      style="position: fixed; width: 100%"
      :allDataList="allDataList"
      id="headercomId"
    />
    <router-view></router-view>
  </div>
</template>

<script setup>
import HeaderCom from "@/components/HeaderCom.vue";
import { toRaw, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useIndexHooks } from "@/views/index/indexHooks";
const { allDataList } = useIndexHooks();
let router = useRouter();
onMounted(() => {});
const colorVar = {
  HeaderBackGroundColor: "--gray-900",
  HeaderBackTextColor: "--yellow-050",
};
onMounted(() => {
  const headerCom = document.getElementById("headercomId");
  window.addEventListener("scroll", () => {
    if (window.scrollY !== 0) {
      headerCom.style.background = "#fff";
      headerCom.style.color = "#000";
    
    } else {
      headerCom.style.background = `var(${colorVar.HeaderBackGroundColor})`;
      headerCom.style.color = `var(${colorVar.HeaderBackTextColor})`;
    }
  });
});
</script>

<style></style>
